{% extends "personal_center/user-base.html" %}
{% block page_link %}
    <script src="../../static/personal_center/js/profile.js"></script>
{% endblock %}


{% block page_search %}

{% endblock %}


{% block page_body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="iq-card">
                    <div class="iq-card-body p-0">
                        <div class="iq-edit-list">
                            <ul class="iq-edit-profile d-flex nav nav-pills">
                                <li class="col-md-3 p-0">
                                    <a class="nav-link active" data-toggle="pill" href="#personal-information">
                                        个人信息
                                    </a>
                                </li>
                                <li class="col-md-3 p-0">
                                    <a class="nav-link" data-toggle="pill" href="#chang-pwd">
                                        更改密码
                                    </a>
                                </li>
                                <li class="col-md-3 p-0">
                                    <a class="nav-link" data-toggle="pill" href="#emailandsms">
                                        电子邮件和短信
                                    </a>
                                </li>
                                <li class="col-md-3 p-0">
                                    <a class="nav-link" data-toggle="pill" href="#manage-contact">
                                        修改联系方式
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="iq-edit-list-data">
                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="personal-information" role="tabpanel">
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">个人信息</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <form>
                                        <div class="form-group row align-items-center">
                                            <div class="col-md-12">
                                                <div class="profile-img-edit">
                                                    <img class="profile-pic"
                                                         src="../../static/public_file/images/user/11.png"
                                                         alt="profile-pic">
                                                    <div class="p-image">
                                                        <i class="ri-pencil-line upload-button"></i>
                                                        <input class="file-upload" type="file" accept="image/*"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class=" row align-items-center">
                                            <div class="form-group col-sm-6">
                                                <label for="fname">姓名:</label>
                                                <input type="text" class="form-control" id="fname" value="姓名">
                                            </div>

                                            <div class="form-group col-sm-6">
                                                <label for="cname">城市:</label>
                                                <input type="text" class="form-control" id="cname" value="城市">
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label class="d-block">性别:</label>
                                                <div class="custom-control custom-radio custom-control-inline">
                                                    <input type="radio" id="customRadio6" name="customRadio1" class="custom-control-input" checked="">
                                                    <label class="custom-control-label" for="customRadio6">男 </label>
                                                </div>
                                                <div class="custom-control custom-radio custom-control-inline">
                                                    <input type="radio" id="customRadio7" name="customRadio1" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio7">女 </label>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label for="dob">出生日期:</label>
                                                <input class="form-control" id="dob" value="1999-01-24">
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label>婚姻状态:</label>
                                                <select class="form-control" id="exampleFormControlSelect1">
                                                    <option selected="">单身</option>
                                                    <option>已婚</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label>年龄:</label>
                                                <input class="form-control" id="age" value="22">
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label>国家:</label>
                                                <input class="form-control" id="Country" value="中国">
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <label>省份:</label>
                                                <input class="form-control" id="province" value="中国">
                                            </div>
                                            <div class="form-group col-sm-12">
                                                <label>具体地址:</label>
                                                <textarea class="form-control" name="address" rows="5"
                                                          style="line-height: 22px;">
                                                    </textarea>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary mr-2">提交</button>
                                        <button type="reset" class="btn iq-bg-danger">取消</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="chang-pwd" role="tabpanel">
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">更改密码</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="cpass">当前密码:</label>
                                            <input type="Password" class="form-control" id="cpass" value="">
                                        </div>
                                        <div class="form-group">
                                            <label for="npass">新密码:</label>
                                            <input type="Password" class="form-control" id="npass" value="">
                                        </div>
                                        <div class="form-group">
                                            <label for="vpass">确认密码:</label>
                                            <input type="Password" class="form-control" id="vpass" value="">
                                        </div>
                                        <button type="submit" class="btn btn-primary mr-2">提交</button>
                                        <button type="reset" class="btn iq-bg-danger">取消</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="emailandsms" role="tabpanel">
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">电子邮件和短信</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <form>
                                        <div class="form-group row align-items-center">
                                            <label class="col-md-3" for="emailnotification">电子邮件通知:</label>
                                            <div class="col-md-9 custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input"
                                                       id="emailnotification" checked="">
                                                <label class="custom-control-label" for="emailnotification"></label>
                                            </div>
                                        </div>
                                        <div class="form-group row align-items-center">
                                            <label class="col-md-3" for="smsnotification">短信通知:</label>
                                            <div class="col-md-9 custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input"
                                                       id="smsnotification" checked="">
                                                <label class="custom-control-label" for="smsnotification"></label>
                                            </div>
                                        </div>
                                        <div class="form-group row align-items-center">
                                            <label class="col-md-3" for="npass">何时发送电子邮件</label>
                                            <div class="col-md-9">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input"
                                                           id="email01">
                                                    <label class="custom-control-label" for="email01">您有新通知</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input"
                                                           id="email02">
                                                    <label class="custom-control-label" for="email02">你收到了一条直接消息</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="email03"
                                                           checked="">
                                                    <label class="custom-control-label" for="email03">有人将您添加为联系人</label>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary mr-2">提交</button>
                                        <button type="reset" class="btn iq-bg-danger">取消</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="manage-contact" role="tabpanel">
                            <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                    <div class="iq-header-title">
                                        <h4 class="card-title">修改联系方式</h4>
                                    </div>
                                </div>
                                <div class="iq-card-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="cno">联系电话:</label>
                                            <input type="text" class="form-control" id="cno"
                                                   value="138****8888">
                                        </div>
                                        <div class="form-group">
                                            <label for="email">邮箱:</label>
                                            <input type="text" class="form-control" id="email"
                                                   value="Binijone@demo.com">
                                        </div>
                                        <button type="submit" class="btn btn-primary mr-2">提交</button>
                                        <button type="reset" class="btn iq-bg-danger">取消</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

